<script setup>
import useSettingsStore from '@/store/modules/settings.js'
import { onMounted, ref, watch } from 'vue'
import VCharts from 'vue-echarts'

const props = defineProps({
  options: {
    required: true,
    type: Object,
    default() {
      return {}
    },
  },
  autoresize: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
})

const renderChart = ref(false)
const settingStore = useSettingsStore()
const theme = ref(settingStore.isDark ? 'dark' : 'light')
settingStore.$subscribe((mutation, state) => {
  theme.value = state.isDark ? 'dark' : 'light'
})
// 确保容器展开后再渲染图表
onMounted(() => {
  renderChart.value = true
})

// 监听容器大小变化，如果有必要，可以在这里添加更多的逻辑
watch([() => props.width, () => props.height], () => {
  if (renderChart.value) {
    // 这里可以添加更多的逻辑，例如重新渲染图表
  }
})
</script>

<template>
  <VCharts
    v-show="renderChart"
    :option="options"
    :autoresize="autoresize"
    :style="{ width, height }"
    :theme="theme"
  />
</template>
